<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.2.2/lib/index.js"></script>
<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <el-select class="filter-item" v-model="listQuery.actId" placeholder="请选择活动">
      <el-option v-for="activity in activitys" :key="activity.actId" :label="activity.actInfo" :value="activity.actId"></el-option>
    </el-select>
    <el-input style="width: 200px;" class="filter-item" placeholder="商户号" v-model="listQuery.merNo"> </el-input>
    <el-select class="filter-item" v-model="listQuery.sceneId" placeholder="请选择场景">
      <el-option v-for="scene in scenes" :key="scene.sceneCode" :label="scene.sceneName" :value="scene.sceneCode"></el-option>
    </el-select>
    <el-select class="filter-item" v-model="listQuery.discountType" placeholder="请选择优惠类型">
      <el-option v-for="discount in discounts" :key="discount.value" :label="discount.text" :value="discount.value"></el-option>
    </el-select>
    <el-date-picker v-model="listQuery.beginDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始时间"></el-date-picker>
    <el-date-picker v-model="listQuery.endDate" type="date" :picker-options="pickerSelectBeginDateAfter" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间"></el-date-picker>
    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
  </div>
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

    <el-table-column width="300px" align="center" label="活动编号"> <template scope="scope">
          <span>{{scope.row.actId}}</span>
      </template> </el-table-column>
    <el-table-column align="center" label="商户号" width="200px;"> <template scope="scope">
          <span>{{scope.row.merNo}}</span>
        </template> </el-table-column>
    <el-table-column width="200px" align="center" label="场景编码"> <template scope="scope">
          <span>{{scope.row.sceneId}}</span>
      </template> </el-table-column>
    <el-table-column width="200px" align="center" label="抵扣金额"> <template scope="scope">
          <span>{{scope.row.discountAmt}}</span>
      </template> </el-table-column>
    <el-table-column width="300px" align="center" label="订单号"> <template scope="scope">
          <span>{{scope.row.merorderno}}</span>
      </template> </el-table-column>
    <el-table-column width="300px" align="center" label="优惠类型"> <template scope="scope">
          <span v-if="scope.row.discountType === '01'">红包</span>
          <span v-else-if="scope.row.discountType === '02'">积分</span>
      </template> </el-table-column>
    <el-table-column width="200px" align="center" label="交易时间"> <template scope="scope">
          <span>{{scope.row.useTime}}</span>
      </template> </el-table-column>
  </el-table>
  <div style='padding: 20px; background-color: #d4d6d5;'>
    <div style='font-size: large;display: inline-block;'>总计</div>
    <div style='font-size: large;float: right;'>{{ totalAmt }} 元</div>
  </div>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
</div>
</template>

<script>
import {
  page,
  getActivityObj,
  getSceneObj
} from '@/api/biz/operative/discountStatistics/index'
import { mapGetters } from 'vuex'
export default {
  name: 'user',
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        actId: '',
        sceneId: '',
        discountType: '00',
        merNo: '',
        beginDate: '',
        endDate: ''
      },
      activitys: '',
      selectAct: {
        actId: '',
        actInfo: '请选择'
      },
      scenes: '',
      list: null,
      total: null,
      totalAmt: null,
      discounts: [
        {
          value: '00',
          text: '全部'
        }, {
          value: '01',
          text: '红包'
        }, {
          value: '02',
          text: '积分'
        }
      ],
      tokens: '',
      listLoading: true,
      tableKey: 0,
      pickerSelectBeginDateAfter: {
        disabledDate: (time) => {
          return time.getTime() < this.listQuery.beginDate
        }
      }
    }
  },
  created() {
    this.getList()
    this.getActivityList()
    this.getSceneList()
  },
  mounted() {
  },
  computed: {
    ...mapGetters([
      'elements',
      'token'
    ])
  },
  methods: {
    getList() {
      this.listLoading = true
      page(this.listQuery)
        .then(response => {
          console.log(response)
          this.list = response.discountList
          this.totalAmt = response.totalAmt
          this.total = response.discountCountNum
          this.listLoading = false
        })
    },
    getActivityList() {
      getActivityObj()
        .then(response => {
          this.activitys = response
          this.activitys.unshift(this.selectAct)
        })
    },
    getSceneList() {
      getSceneObj()
        .then(response => {
          this.scenes = response
        })
    },
    handleFilter() {
      console.log(this.listQuery.beginDate)
      console.log(this.listQuery.endDate)
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    resetTemp() {
      this.form = {
        actStauts: '00',
        actInfo: '',
        actRemark: '',
        actToken: ''
      }
    }
  }
}
</script>

<style scoped>
label {
    margin: 0px 0px !important;
}
</style>

